<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>推荐 - 美食百家姓</title>

	<!-- Main Styles -->
	<link rel="stylesheet" href="../assets/styles/style-horizontal.css">
	
	<!-- Material Design Icon -->
	<link rel="stylesheet" href="../assets/fonts/material-design/css/materialdesignicons.css">

	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="../assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

	<!-- Waves Effect -->
	<link rel="stylesheet" href="../assets/plugin/waves/waves.min.css">

	<!-- Sweet Alert -->
	<link rel="stylesheet" href="../assets/plugin/sweet-alert/sweetalert.css">
	
	<!-- Data Tables -->
	<link rel="stylesheet" href="../assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
	
	<!-- Touch Spin -->
	<link rel="stylesheet" href="../assets/plugin/touchspin/jquery.bootstrap-touchspin.min.css">
	
	<!-- Select2 -->
	<link rel="stylesheet" href="../assets/plugin/select2/css/select2.min.css">
	
	<!-- Jquery UI -->
	<link rel="stylesheet" href="../assets/plugin/jquery-ui/jquery-ui.min.css">
	<link rel="stylesheet" href="../assets/plugin/jquery-ui/jquery-ui.structure.min.css">
	<link rel="stylesheet" href="../assets/plugin/jquery-ui/jquery-ui.theme.min.css">

</head>

<body>
<header class="fixed-header">
	<div class="header-top">
		<div class="container">
			<div class="pull-left">
				<a th:href="@{/index/(username=${username})}" class="logo"><i class="ico mdi mdi-cube-outline"></i>美食百家姓</a>
			</div>
			<!-- /.pull-left -->
			<div class="pull-right">
				<div class="ico-item hidden-on-desktop">
					<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
				</div>
				<!-- /.ico-item hidden-on-desktop -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
					<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
					<!-- /.searchform -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
					<div id="user-status" class="user-status js__toggle">
						<a href="#" class="avatar"><img src="../assets/images/avatar.png" alt=""><span class="status online"></span></a>
						<h5 class="name" id="sal-prompt" th:text="${username}"></h5>
						<h5 class="position">Administrator</h5>
						<!-- /.name -->
						<div class="control-items">
							<div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>
							<div class="control-item">
								<a href="#" class="js__logout" title="Log out">
									<i class="fa fa-power-off"></i>
								</a>
							</div>
						</div>
						<!-- /.control-items -->
					</div>
					<!-- /#user-status -->
				</div>
				<!-- /.ico-item -->
			</div>
			<!-- /.pull-right -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.header-top -->
	<nav class="nav-horizontal">
		<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
		<div class="container">
			<ul class="menu">
					<li class="current">
						<a th:href="@{/index/(username=${username})}"><i class="ico mdi mdi-home"></i><span>主页</span></a>
					</li>
					<li class="current">
						<a th:href="@{/recommend/(username=${username})}"><i class="fa fa-area-chart" style="margin-right: 8px;"></i><span>推荐</span></a>
					</li>
					<li class="current">
						<a th:href="@{/preference/(username=${username})}"><i class="fa fa-cogs" style="margin-right: 8px;"></i><span>偏好设置</span></a>
					</li>
			</ul>
			<!-- /.menu -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
<div style="width: 100%;height: 100px;"></div>

<!-- 内容 -->
<div class="my_content">
	<div class="my_recommend">
		<h4 class="box-title" style="font-weight: bolder;">智能推荐</h4>
		<!-- /.box-title -->
		<div class="review-list">
		</div>
		<!-- /.review-list -->
	</div>
	
	<div class="my_table">
		
		<div class="search_items">
			<div class="col-xs-6 col-xs-12" style="width: 55%">
				<div class="box-content">
					<h4 style="padding-left: 17px;font-weight: bolder;">找美食</h4>
					<div class="search_item">
						<p class="item_title">菜系</p>
						<select id="cuisine_select" class="select2_2 form-control" multiple="multiple">
							<option value="0">鲁菜</option>
							<option value="1">川菜</option>
							<option value="2">粤菜</option>
							<option value="3">苏菜</option>
							<option value="4">闽菜</option>
							<option value="5">浙菜</option>
							<option value="6">徽菜</option>
							<option value="7">湘菜</option>
							<option value="8">其他</option>
						</select>
					</div>
					<div class="search_item">
						<p class="item_title">省市</p>
						<select id="city_select" class="form-control select2_1" multiple="multiple">
							<option value="0">北京</option>
							<option value="1">天津</option>
							<option value="2">河北</option>
							<option value="3">山西</option>
							<option value="4">内蒙古自治区</option>
							<option value="5">辽宁</option>
							<option value="6">吉林</option>
							<option value="7">黑龙江</option>
							<option value="8">上海</option>
							<option value="9">江苏</option>
							<option value="10">浙江</option>
							<option value="11">安徽</option>
							<option value="12">福建</option>
							<option value="13">江西</option>
							<option value="14">山东</option>
							<option value="15">河南</option>
							<option value="16">湖北</option>
							<option value="17">湖南</option>
							<option value="18">广东</option>
							<option value="19">广西壮族自治区</option>
							<option value="20">海南</option>
							<option value="21">重庆</option>
							<option value="22">四川</option>
							<option value="23">贵州</option>
							<option value="24">云南</option>
							<option value="25">西藏自治区</option>
							<option value="26">陕西</option>
							<option value="27">甘肃</option>
							<option value="28">青海</option>
							<option value="29">宁夏回族自治区</option>
							<option value="30">新疆维吾尔自治区</option>
							<option value="31">台湾</option>
							<option value="32">香港特别行政区</option>
							<option value="33">澳门特别行政区</option>
						</select>
					</div>
					<div class="search_item">
						<p class="item_title">口味</p>
						<select id="keyword_select" class="select2_2 form-control" multiple="multiple">
							<option value="0">酸</option>
							<option value="1">甜</option>
							<option value="2">辣</option>
							<option value="3">清淡</option>
							<option value="4">咸</option>
							<option value="5">香</option>
							<option value="6">麻</option>
							<option value="7">主荤</option>
							<option value="8">主素</option>
						</select>
					</div>
					<div class="search_item">
						<p class="item_title">价格区间</p>
						<div class="row margin-bottom-10" style="display: flex;">
							<div class="col-md-6">
								<input id="min_price" type="text" value="0" name="demo2" class="col-md-8 form-control">
							</div>
							<div class="col-md-6">
								<input id="max_price" type="text" value="1000" name="demo2" class="col-md-8 form-control">
							</div>
						</div>
					</div>
					<button id="search_delicacy" type="button" class="btn btn-info btn-rounded btn-bordered waves-effect waves-light" style="margin-left: 40%;">搜&ensp;&ensp;索</button>
				</div>
			</div>
			
			<div class="col-lg-4 col-md-6 col-xs-12" style="width: 40%;display: flex;align-items: center;">
				<div class="box-content card bordered-all success js__card" style="min-width: 345px;border-radius: 2%;">
					<h4 class="box-title bg-success with-control" style="border-radius: 2%;">
						每日一菜
						<span class="controls">
							<button type="button" class="control fa fa-minus js__card_minus"></button>
							<button type="button" class="control fa fa-times js__card_remove"></button>
						</span>
						<!-- /.controls -->
					</h4>
					<!-- /.box-title -->
					<div class="card-content js__card_content my_layout">
						<img class="delicacy_img" src="../css/login/images/bg.png"/>
						<div style="margin: 10px;">
							<h5 class="delicacy_title">回锅肉</h5>
							<p class="delicacy_des">纤手搓来玉色匀，碧油煎出嫩黄深。夜来春睡知轻重，压扁佳人缠臂金。</p>
						</div>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
		</div>

			<table id="example" class="table table-striped table-bordered display" style="width:100%">
				<thead>
					<tr>
						<th>菜品名称</th>
						<th>所属菜系</th>
						<th>城市特产</th>
						<th>味道特色</th>
						<th>近期热度</th>
						<th>平均价格</th>
					</tr>
				</thead>
				<tbody>
					<tr><td>三丝敲鱼</td><td>浙菜</td><td>浙江</td><td>酸,甜,辣,咸,香,主荤</td><td>3367</td><td>78</td></tr><tr><td>上汤焗龙虾</td><td>粤菜</td><td>广东</td><td>香,辣,甜,主荤</td><td>3375</td><td>298</td></tr><tr><td>东坡肉</td><td>浙菜</td><td>浙江,四川,湖北</td><td>香,咸,主荤</td><td>3415</td><td>38</td></tr><tr><td>东坡肘子</td><td>川菜</td><td>四川</td><td>香,主荤</td><td>3323</td><td>78</td></tr><tr><td>东安子鸡</td><td>湘菜</td><td>湖南</td><td>香,甜,酸,辣,主荤</td><td>3343</td><td>60</td></tr><tr><td>佛跳墙</td><td>闽菜</td><td>福建</td><td>香,清淡,主素</td><td>3274</td><td>128</td></tr><tr><td>冰糖甲鱼</td><td>浙菜</td><td>浙江</td><td>甜,咸,香,主荤</td><td>3339</td><td>500</td></tr><tr><td>剁椒鱼头</td><td>湘菜</td><td>湖南</td><td>香,麻,辣,主荤</td><td>3346</td><td>69</td></tr><tr><td>发丝百叶</td><td>湘菜</td><td>湖南</td><td>香,咸,辣,酸,主荤</td><td>3339</td><td>80</td></tr><tr><td>叫化童鸡</td><td>浙菜</td><td>浙江</td><td>香,麻,主荤</td><td>3387</td><td>60</td></tr><tr><td>回锅肉</td><td>川菜</td><td>四川</td><td>香,主荤</td><td>3307</td><td>38</td></tr><tr><td>土笋冻</td><td>闽菜</td><td>福建</td><td>甜,咸,主荤</td><td>3352</td><td>39</td></tr><tr><td>大煮干丝</td><td>苏菜</td><td>江苏</td><td>清淡,咸,主素</td><td>3379</td><td>38</td></tr><tr><td>夫妻肺片</td><td>川菜</td><td>四川,重庆</td><td>香,麻,辣,主荤</td><td>3413</td><td>30</td></tr><tr><td>姜母鸭</td><td>闽菜</td><td>福建</td><td>甜,清淡,主荤</td><td>3458</td><td>57</td></tr><tr><td>宋嫂鱼羹</td><td>浙菜</td><td>浙江</td><td>香,甜,清淡,主荤</td><td>3284</td><td>20</td></tr><tr><td>宫保鸡丁</td><td>川菜</td><td>北京,四川,山东,贵州,重庆</td><td>香,主荤</td><td>3421</td><td>34</td></tr><tr><td>干炒牛河</td><td>粤菜</td><td>广东</td><td>香,咸,主素</td><td>3272</td><td>35</td></tr><tr><td>干菜焖肉</td><td>浙菜</td><td>浙江</td><td>香,咸,主荤</td><td>3385</td><td>39</td></tr><tr><td>开水白菜</td><td>川菜</td><td>北京,四川</td><td>香,清淡,主素</td><td>3305</td><td>380</td></tr><tr><td>松鼠桂鱼</td><td>苏菜</td><td>江苏</td><td>酸,甜,香,主荤</td><td>3277</td><td>88</td></tr><tr><td>梅菜扣肉</td><td>粤菜</td><td>广东</td><td>香,咸,甜,主荤</td><td>3364</td><td>54</td></tr><tr><td>樟茶鸭子</td><td>川菜</td><td>四川</td><td>香,咸,主荤</td><td>3307</td><td>60</td></tr><tr><td>毛氏红烧肉</td><td>湘菜</td><td>四川,湖南</td><td>香,甜,咸,辣,主荤</td><td>3346</td><td>45</td></tr><tr><td>水煮牛肉</td><td>川菜</td><td>四川</td><td>香,麻,辣,主荤</td><td>3341</td><td>40</td></tr><tr><td>永州血鸭</td><td>湘菜</td><td>湖南</td><td>香,主荤</td><td>3321</td><td>51</td></tr><tr><td>沙县小吃</td><td>闽菜</td><td>福建</td><td>酸,辣,主素</td><td>3340</td><td>20</td></tr><tr><td>沙茶面</td><td>闽菜</td><td>福建</td><td>甜,香,主素</td><td>3353</td><td>28</td></tr><tr><td>海蛎煎</td><td>闽菜</td><td>福建</td><td>甜,咸,主素</td><td>3391</td><td>39</td></tr><tr><td>清汤越鸡</td><td>浙菜</td><td>浙江</td><td>香,清淡,主荤</td><td>3407</td><td>80</td></tr><tr><td>湘西外婆菜</td><td>湘菜</td><td>湖南</td><td>香,咸,主素</td><td>3236</td><td>15</td></tr><tr><td>潮州牛肉丸</td><td>粤菜</td><td>广东</td><td>香,主荤</td><td>3351</td><td>28</td></tr><tr><td>烧鹅</td><td>粤菜</td><td>广东</td><td>香,咸,甜,主荤</td><td>3316</td><td>120</td></tr><tr><td>白切鸡</td><td>粤菜</td><td>广东</td><td>香,酸,清淡,主荤</td><td>3324</td><td>67</td></tr><tr><td>盐水鸭</td><td>苏菜</td><td>江苏</td><td>咸,主荤</td><td>3317</td><td>42</td></tr><tr><td>砂锅鱼头</td><td>苏菜</td><td>江苏</td><td>香,咸,清淡,主荤</td><td>3342</td><td>156</td></tr><tr><td>红烧河豚</td><td>苏菜</td><td>江苏</td><td>甜,咸,主荤</td><td>3353</td><td>78</td></tr><tr><td>肠粉</td><td>粤菜</td><td>广东</td><td>香,咸,甜,主素</td><td>3256</td><td>20</td></tr><tr><td>腊味合蒸</td><td>湘菜</td><td>湖南</td><td>香,咸,主荤</td><td>3332</td><td>50</td></tr><tr><td>芋泥</td><td>闽菜</td><td>福建</td><td>甜,主素</td><td>3330</td><td>20</td></tr><tr><td>荔枝肉</td><td>闽菜</td><td>福建</td><td>甜,酸,主荤</td><td>3345</td><td>48</td></tr><tr><td>荷塘小炒</td><td>粤菜</td><td>广东</td><td>咸,清淡,主素</td><td>3398</td><td>28</td></tr><tr><td>蒜泥白肉</td><td>川菜</td><td>四川</td><td>香,清淡,主荤</td><td>3384</td><td>33</td></tr><tr><td>蜜汁叉烧</td><td>粤菜</td><td>广东</td><td>香,甜,主荤</td><td>3336</td><td>58</td></tr><tr><td>蟹粉狮子头</td><td>苏菜</td><td>江苏</td><td>香,甜,主荤</td><td>3331</td><td>67</td></tr><tr><td>西湖醋鱼</td><td>浙菜</td><td>浙江</td><td>香,酸,甜,主荤</td><td>3305</td><td>68</td></tr><tr><td>软兜长鱼</td><td>苏菜</td><td>江苏</td><td>香,甜,咸,清淡,主荤</td><td>3280</td><td>56</td></tr><tr><td>醉排骨</td><td>闽菜</td><td>福建</td><td>酸,甜,辣,主荤</td><td>3313</td><td>76</td></tr><tr><td>金陵烤鸭</td><td>苏菜</td><td>江苏</td><td>香,咸,主荤</td><td>3400</td><td>113</td></tr><tr><td>阿一鲍鱼</td><td>粤菜</td><td>广东</td><td>香,咸,主荤</td><td>3367</td><td>466</td></tr><tr><td>雪菜大汤黄鱼</td><td>浙菜</td><td>上海,浙江</td><td>香,甜,清淡,主荤</td><td>3347</td><td>79</td></tr><tr><td>霸王别姬</td><td>苏菜</td><td>江苏</td><td>香,咸,清淡,主荤</td><td>3329</td><td>228</td></tr><tr><td>鱼香肉丝</td><td>川菜</td><td>四川</td><td>酸,甜,香,主荤</td><td>3325</td><td>30</td></tr><tr><td>鸭血粉丝汤</td><td>苏菜</td><td>江苏</td><td>香,清淡,主素</td><td>3338</td><td>40</td></tr><tr><td>麻婆豆腐</td><td>川菜</td><td>四川</td><td>香,麻,辣,主素</td><td>3330</td><td>13</td></tr><tr><td>麻辣子鸡</td><td>湘菜</td><td>四川,湖南</td><td>香,麻,辣,主荤</td><td>3357</td><td>47</td></tr><tr><td>龙井虾仁</td><td>浙菜</td><td>浙江</td><td>香,甜,清淡,主荤</td><td>3264</td><td>88</td></tr><tr><td>龙身凤尾虾</td><td>闽菜</td><td>福建</td><td>咸,香,主荤</td><td>3242</td><td>84</td></tr>
				</tbody>
			</table>

	</div>
	
</div>
		
		
	<!-- ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="../assets/scripts/jquery.min.js"></script>
	<script src="../../assets/scripts/jquery.cookie.js"></script>
	<script src="../assets/scripts/modernizr.min.js"></script>
	<script src="../assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="../assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="../assets/plugin/nprogress/nprogress.js"></script>
	<script src="../assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="../assets/plugin/waves/waves.min.js"></script>
	<script src="../assets/scripts/sweetalert.init.min.js"></script>

	<!-- Flot Chart -->
	<script src="../assets/scripts/echarts.min.js"></script>
	
	<!-- Data Tables -->
	<script src="../assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
	<script src="../assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
	<script src="../assets/scripts/datatables.demo.min.js"></script>
	
	<!-- Touch Spin -->
	<script src="../assets/plugin/touchspin/jquery.bootstrap-touchspin.min.js"></script>
	
	<!-- Select2 -->
	<script src="../assets/plugin/select2/js/select2.min.js"></script>
	
	<!-- Demo Scripts -->
	<script src="../assets/scripts/form.demo.min.js"></script>
	
	<!-- Jquery UI -->
	<script src="../assets/plugin/jquery-ui/jquery-ui.min.js"></script>
	<script src="../assets/plugin/jquery-ui/jquery.ui.touch-punch.min.js"></script>

	<script src="../assets/scripts/main.min.js"></script>
	<script src="../assets/scripts/horizontal-menu.min.js"></script>
	<script>
		let username = String($.cookie("user_name"));
		//智能推荐数据请求
		$.ajax({
			type : 'post',
			url: "/recommendDelicacies",
			data: {username},
			success:function (res) {
				console.log(res);
				reviewItemHTML(res);
			},
			error:function (err) {

			}
		});

		//每日一菜数据请求
		$.ajax({
			type : 'get',
			url: "/daily",
			dataType: 'json',
			success:function (res) {
				$(".delicacy_title").text(res.name);
				// $(".delicacy_des").text(res.des);
			},
			error:function (err) {
				alert("数据加载失败");
			}
		});

		//查询菜品
		$("#search_delicacy").click(function(){
			let cuisine_select = [];
			let city_select = [];
			let keyword_select = [];
			$("#cuisine_select option:selected").each(function(){
				cuisine_select.push($(this).val());
			});
			$("#city_select option:selected").each(function(){
				city_select.push($(this).val());
			});
			$("#keyword_select option:selected").each(function(){
				keyword_select.push($(this).val());
			});
			let min_price = $("#min_price").val();
			let max_price = $("#max_price").val();
			let data = {
				"cuisine_select":cuisine_select,
				"city_select":city_select,
				"keyword_select":keyword_select,
				"price_area":[min_price,max_price]
			};
			console.log(data);
			//查询请求
			$.ajax({
				type : 'post',
				url: "/targetDelicacies",
				data: JSON.stringify(data),
				dataType: 'json',
				contentType:"application/json",
				success:function (res) {
					console.log(res);
					tbodyHTML(res);
				},
				error:function (err) {
					alert("加载失败");
				}
			});
		});
		function tbodyHTML(data) {
			let new_html = "";
			if(data.length>0){
				data.forEach(d=>{
					new_html = new_html + "<tr><td>" + d.NAME + "</td>" +
							"<td>" + d.CUISINE_NAME + "</td>" +
							"<td>" + d.AREA + "</td>" +
							"<td>" + d.KEYWORD + "</td>" +
							"<td>" + d.HEAT + "</td>" +
							"<td>" + d.PRICE + "</td>" + "</tr>";
				});
			}else {
				new_html="";
			}
			$("tbody").html(new_html);
		}

		function reviewItemHTML(data) {
			let review_html = "";
			if(data.length>0){
				for (let i = 0; i < data.length; i++) {
					if(i==10)break;
					review_html = review_html + "<div class=\"review-item\">" +
							"<div class=\"top\">" +
							"<div class=\"name\">" + data[i].NAME +"</div>" +
							"<div class=\"star-rating text-warning\">" +
							"<i class=\"fa fa-star\"></i>" +
							"<i class=\"fa fa-star\"></i>" +
							"<i class=\"fa fa-star\"></i>" +
							"<i class=\"fa fa-star-half-o\"></i>" +
							"<i class=\"fa fa-star-o\"></i>" +
							"</div>" +
							"</div>" +
							"<div class=\"desc\">该菜品近期消费订单达" + data[i].HEAT + "次，" + "味道" + data[i].KEYWORD + "，很和您口味哦。</div>" +
							"</div>";
				}
			}
			else {
				review_html = "<div>暂无推荐，修改一下偏好吧</div>";
			}
			$(".review-list").html(review_html);
		}
	</script>
</body>
</html>
<style type="text/css">
	.my_content{
		display: flex;
	}
	.my_table{
		display: flex;
		background-color: #fff;
		margin: 10px;
		padding: 15px;
		width: 80%;
		flex-direction: column;
		box-shadow: 1px 1px 5px #ddd;
		border-radius: 1%;
		}
	.my_recommend{
		position: relative;
		width: 36%;
		padding: 20px;
		margin: 10px;
		background: #ffffff;
		box-shadow: 1px 1px 5px #ddd;
		border-radius: 2%;
	}
	.search_item{
		display: flex;
		padding: 10px 0px;
	}
	.search_items{
		display: flex;
		justify-content: space-around;
	}
	.item_title{
		align-items: center;
		justify-content: center;
		display: flex;
		padding-top: 10px;
		width: 30%;
	}
	.my_layout{
		display: flex;
	}
	.delicacy_img{
		width: 150px;
		height: 150px;
	}
	.delicacy_title{
		font-weight: bolder;
		margin-top: -1px;
	}
</style>